<template>
    <div class="i-input">
        <div style="position: relative;font-size: 0">
            <input class="input" :class="rulesContents.isRules?'err_border':''" :type="inType" ref="input" @focus="focusIn"
                   @blur="blurOut" v-model="inputText">
            <div class="text" :class="[rulesContents.isRules?'err':'',isFocus || inputText?'text_foucs':'']" ref="text">
                <slot name="placeholder"></slot>
            </div>
            <div class="eyes">
                <el-icon size="16" @click="changeEyes(false)" v-if="type === 'password' && eyes"><Hide /></el-icon>
                <el-icon size="16" @click="changeEyes(true)"  v-if="type === 'password' && !eyes"><View /></el-icon>
            </div>
        </div>
        <div class="err_tips" :class="rulesContents.isRules?'err':''"
             :style="{height: rulesContents.isRules?'1.5em':'0',opacity: rulesContents.isRules?'1':'0'}">
            <el-icon size="16">
                <WarningFilled/>
            </el-icon>
            <span style="margin-left: 8px">{{ rulesContents.rulesText }}</span>
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref, computed, withDefaults} from 'vue'
import {ruleType, SetRules} from '@/util'

interface props {
  modelValue: string | number,
  rulesContent?: ruleType,
  label?: string,
  type?: string
}

let isFocus = ref<boolean>(false)
const Props = withDefaults(defineProps<props>(), {
  modelValue: '',
  rulesContent: () => {
    return ({
      rulesText: '',
      isRules: false
    })
  },
  label: '',
  type:'text'
})
const Emits = defineEmits<{
  (e: 'update:modelValue', modelValue: string | number): void
  (e: 'update:rulesContent', rulesContent: ruleType): void
}>()
let inputText = computed({
  get() {
    return Props.modelValue
  },
  set(value: string | number) {
    Emits('update:modelValue', value)
  }
})
let rulesContents = computed({
  get() {
    return Props.rulesContent
  },
  set(value: ruleType) {
    Emits('update:rulesContent', value)
  }
})
let inType = ref<string>(Props.type)
let text = ref()
let input = ref()
let eyes = ref<boolean>(false)
const changeEyes = (isEyes:boolean) => {
  eyes.value = isEyes
  inType.value = isEyes?'text':'password'
}
const focusIn = () => {
  text.value.classList.add('text_foucs')
  input.value.classList.add('input_foucs')
  isFocus.value = true
}
const blurOut = () => {
  isFocus.value = false
  Emits('update:rulesContent', SetRules(Props.label!, inputText.value))
  if (!inputText.value) {
    text.value.classList.remove('text_foucs')
    input.value.classList.remove('input_foucs')

  }

}
</script>

<style scoped lang="scss">
:root {
  --in-color-err: rgb(208, 14, 23);
}

input {
  height: 52px;
  line-height: 52px;
  width: calc(100% - 16px);
  list-style: none;
  padding: 0;
  border: 1px solid rgb(194, 200, 208);
  border-radius: 3px;
  color: rgb(45, 51, 58) !important;
  font-size: 16px;
  padding-left: 16px;
  outline: none;
  transition: border .2s ease-in-out;

  &:focus-within {
    border: 1px solid #10a37f;
  }
}

.i-input {
  position: relative;
}

.text {
  position: absolute;
  color: rgb(111, 119, 128);
  font-size: 16px;
  top: 50%;
  transform: translate(0, -50%);
  left: 18px;
  pointer-events: none;
  transition: all .2s ease-in-out;
  background-color: #fff;
  padding: 1px 6px;
  font-weight: 400;
  border: none;

  &:active {
    color: #10a37f;
  }
}

.text_foucs {
  top: -12px;
  left: 10px;
  transform: scale(.9);
  transform-origin: 0;
  color: #10a37f;
}

.input_foucs {
  border: 1px solid #10a37f;
}

.err {
  //--in-color-err: rgb(208,14,23);
  color: var(--in-color-err) !important;
}

.err_border {
  //--in-color-err: rgb(208,14,23);
  border: 1px solid var(--in-color-err) !important;
}

.err_tips {
  text-align: left;
  font-size: 12px;
  //position: absolute;
  //top: 100%;
  display: flex;
  align-items: center;
  margin-top: 4px;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height .1s ease-in-out, opacity .2s ease-in;
}
.eyes {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
</style>